<template>
	<view class="sign-wrap">
		<view class="sign-text">签到提醒</view>
		<view class="sign-title">
			<text>已连续签到</text>
			<text class="sign-day">1</text>
			<text>天</text>
		</view>
		<view class="sign-tip">连续签到满7天，可领取30低碳积分。</view>

		<u-grid :border="false" col="7">
			<u-grid-item v-for="(item, i) in 7" :key="i">
				<view class="sign-item">
					<view class="sign-item-num">
						<view class="num isSign">+30</view>
						<view class="">
							<u-image src="/static/images/a10.png" width="40rpx" height="40rpx"></u-image>
							<!-- <u-image src="/static/images/a11.png" width="40rpx" height="40rpx"></u-image> -->
						</view>
					</view>
					<view class="week-name is-week">周一</view>
				</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script setup lang="ts">
	export interface Props {
		name?: string | number,
	}
	
	const props = withDefaults(defineProps<Props>(), {
		name: '111'
	})
</script>

<style lang="scss" scoped>
	.sign-wrap {
		position: relative;
		background: #FFFFFF;
		border-radius: 27rpx;
		padding: 34rpx 40rpx 46rpx;

		.sign-text {
			position: absolute;
			right: 76rpx;
			top: 60rpx;
			z-index: 9;
			font-weight: bold;
			color: #4C4C4C;
			font-size: 28rpx;
		}

		.sign-title {
			font-size: 31rpx;
			color: #4C4C4C;
			font-weight: bold;

			.sign-day {
				color: #FF3D3D;
			}
		}

		.sign-tip {
			margin-top: 20rpx;
			font-size: 23rpx;
			color: #999999;
		}
	}

	.sign-item {
		margin-top: 26rpx;

		.sign-item-num {
			@include flex-center(68rpx, 104rpx);
			flex-direction: column;
			background: #F1F1F1;
			border-radius: 7rpx;

			.num {
				font-size: 20rpx;
				color: #868686;
				margin-bottom: 10rpx;
			}

			.isSign {
				font-weight: bold;
				color: #111111;
			}

		}

		.week-name {
			margin-top: 26rpx;
			font-size: 21rpx;
			color: #565656;
			text-align: center;
		}

		.is-week {
			color: #FF6363;
		}
	}
</style>